<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>跟进详情</title>
    <link rel="icon" href="favicon.ico" type="images/ico">
    <meta name="author" content="dc">
    <link rel="stylesheet" type="text/css" href="/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/animate.min.css">
    <!--标签插件-->
    <link rel="stylesheet" href="/css/input_tags.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.min.css">
    <link href="/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="/js/jquery-confirm/jquery-confirm.min.css" />
    <link rel="stylesheet" href="/css/input_tags.css"/>
    <!--轮播图-->
    <link rel="stylesheet" href="/css/swiper-bundle.min.css"/>
    <!-- 评分插件 -->
    <link rel="stylesheet" href="/css/materialdesignicons.min.css" />

    <link rel="stylesheet" href="/css/skin.css"/>
    <link rel="stylesheet" href="/css/customerManager/customerPoolForm.css">

    <script th:inline="javascript">
        var clueFollowData = [[${clueFollow}]];
        // console.log(clueFollowData)
    </script>

</head>
<body>
<div class="container-fluid">
    <div class="card addCluePoll">
        <div class="card-header">
            <h1>跟进详情</h1>
        </div>
        <form class="card-body">
            <div class="title">
                <p>跟进方式- <span id="followMethid"></span></p>
            </div>
            <div class="well form-well">
                <!-- 跟进方式：1-线上电话；2-拜访 3-微信 4-线下电话 5-邮箱 6-陪访-->
                <input type="hidden" name="followWayType" id="followWayType" th:value="${followWay}">
                <!--跟进记录主键-->
                <input type="hidden" name="clueFollowId" id="clueFollowId" th:value="${clueFollow?.clueFollowId?:''}">
                <input type="hidden" name="followSource" id="followSource" th:value="${clueFollow?.followSource?:''}">

                <div class="row">

<!--                        <div class="follow-item">跟进方式：-->
<!--                            <span class="text" th:switch="${clueFollow?.followWay?:''}">-->
<!--                                <span th:case="1">线上电话</span>-->
<!--                                <span th:case="2">拜访</span>-->
<!--                                <span th:case="3">微信</span>-->
<!--                                <span th:case="4">线下电话</span>-->
<!--                                <span th:case="5">邮箱</span>-->
<!--                                <span th:case="6">陪访</span>-->
<!--                            </span>-->
<!--                        </div>-->
                        <div class="follow-item col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="follow-item" th:switch="${clueFollow?.followSource}">
                                <span class="foloowTitle">联系人姓名：</span>
                                <span th:case="6" class="text" th:text="${clueFollow?.personName?:''}"></span>
                                <span th:case="*" class="text" th:text="${clueFollow?.contactName?:''}"></span>
                            </div>
                        </div>
                        <div class="follow-item col-lg-4 col-md-4 col-sm-4 col-xs-12" th:if="${clueFollow?.followWay?:''} == 2 or ${clueFollow?.followWay?:''} == 6">
                            <div class="follow-item" th:if="${clueFollow?.followWay?:''} == 2 or ${clueFollow?.followWay?:''} == 6"><span class="foloowTitle">地址：</span><span class="text" th:text="${clueFollow?.visitAddress?:''}"></span></div>
                        </div>
                        <div class="follow-item col-lg-4 col-md-4 col-sm-4 col-xs-12" th:if="${clueFollow?.followWay} ne 1">
                            <div class="follow-item"><span class="foloowTitle">客户质量：</span><span class="text" th:text="${clueFollow?.customerQuality?:''}"></span></div>
                        </div>
<!--                    transTelNumber-->
                        <div class="follow-item col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <input type="text" th:value="${clueFollow?.contactInformation?:''}" hidden="hidden" id="phone">
                            <!--一机多用的联系电话-->
                            <input type="text" th:value="${clueFollow?.personPhone?:''}" hidden="hidden" id="personPhone">
                            <div class="follow-item">
                                <span class="foloowTitle">联系人电话：</span>
                                <span class="text" id="userPhone" ></span>
                            </div>
                        </div>
                        <div class="follow-item col-lg-4 col-md-4 col-sm-4 col-xs-12">
                            <div class="follow-item"><span class="foloowTitle">跟进时间：</span><span class="text" th:text="${#dates.format(clueFollow?.followTm, 'yyyy-MM-dd')}"></span></div>
                        </div>
                        <div class="follow-item col-lg-4 col-md-4 col-sm-4 col-xs-12" th:if="${clueFollow?.followWay} ne 1">
                            <div class="follow-item"><span class="foloowTitle">下次跟进时间：</span><span class="text" th:text="${#dates.format(clueFollow?.nextPlanTime, 'yyyy-MM-dd')}"></span></div>
                        </div>
                        <div class="follow-item col-lg-4 col-md-4 col-sm-4 col-xs-12" th:if="${clueFollow?.followWay} ne 1">
                            <div class="follow-item"><span class="foloowTitle">客户意向：</span><span class="text" th:text="${clueFollow?.customerIntention} ? ${clueFollow?.customerIntention+'%'?:''}:''"></span></div>

                        </div>
                        <div class="follow-item col-lg-4 col-md-4 col-sm-4 col-xs-12" th:if="${clueFollow?.followWay} ne 1">
                            <div class="follow-item">
                                <span class="foloowTitle">客户质量：</span>
                                <span class="text" th:if="${clueFollow?.customerQuality?:''} == 1">优</span>
                                <span class="text" th:if="${clueFollow?.customerQuality?:''} == 2">良</span>
                                <span class="text" th:if="${clueFollow?.customerQuality?:''} == 3">一般</span>
                            </div>
                        </div>
                        <div class="follow-item col-lg-4 col-md-4 col-sm-4 col-xs-12" th:if="${clueFollow?.followWay} ne 1">
                            <div class="follow-item">
                                <span class="foloowTitle">跟进目的：</span>
                                <span class="text" th:if="${clueFollow?.followPurpose?:''} == '1'">产品跟进</span>
                                <span class="text" th:if="${clueFollow?.followPurpose?:''} == '2'">过程跟进</span>
                                <span class="text" th:if="${clueFollow?.followPurpose?:''} == '3'">商机跟进</span>
                            </div>
                        </div>

<!--                        <div class="follow-item">跟进时间：<span class="text" th:text="${#dates.format(clueFollow?.followTm, 'yyyy-MM-dd')}"></span></div>-->
<!--                        <div class="follow-item">下次跟进时间：<span class="text" th:text="${#dates.format(clueFollow?.nextPlanTime, 'yyyy-MM-dd')}"></span></div>-->
                </div>
<!--                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">-->

<!--                        <div class="follow-item">联系人电话：<span class="text" th:text="${clueFollow?.contactInformation?:''}"></span></div>-->
<!--                        <div class="follow-item" th:if="${clueFollow?.followWay?:''} == 5">联系人邮箱：<span class="text" th:text="${clueFollow?.email?:''}"></span></div>-->
<!--                    </div>-->
<!--                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">-->
<!--                        <div class="follow-item" th:if="${clueFollow?.followWay?:''} == 2 or ${clueFollow?.followWay?:''} == 6">地址：<span class="text" th:text="${clueFollow?.visitAddress?:''}"></span></div>-->
<!--                        <div class="follow-item">客户意向：<span class="text" th:text="${clueFollow?.customerIntention} ? ${clueFollow?.customerIntention+'%'?:''}:''"></span></div>-->
<!--                        <div class="follow-item">客户质量：-->
<!--                            <span class="text" th:if="${clueFollow?.customerQuality?:''} == 1">优</span>-->
<!--                            <span class="text" th:if="${clueFollow?.customerQuality?:''} == 2">良</span>-->
<!--                            <span class="text" th:if="${clueFollow?.customerQuality?:''} == 3">一般</span>-->
<!--                        </div>-->
<!--                        <div class="follow-item">跟进目的：-->
<!--                            <span class="text" th:if="${clueFollow?.followPurpose?:''} == '1'">产品跟进</span>-->
<!--                            <span class="text" th:if="${clueFollow?.followPurpose?:''} == '2'">过程跟进</span>-->
<!--                            <span class="text" th:if="${clueFollow?.followPurpose?:''} == '3'">商机跟进</span>-->
<!--                        </div>-->
<!--                    </div>-->
                </div>
<!--                <div class="follow-item col-lg-4 col-md-4 col-sm-4 col-xs-12">-->
<!--                    <div class="follow-item"><span class="foloowTitle">跟进目的：</span><span class="text" th:text="${clueFollow?.followPurpose?:''}"></span></div>-->
<!--                </div>-->


            <div class="title">
                <p>跟进信息</p>
            </div>
            <div class="well form-well">
                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" th:if="${clueFollow?.followWay?:''} == 2">
                        <div class="follow-item" th:if="${clueFollow?.followWay?:''} == 2"><span class="foloowTitle">陪访人：</span><span class="text" th:text="${clueFollow?.accompanyingPerson?:''}"></span></div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" th:if="${clueFollow?.followWay} ne 1">
                        <div class="follow-item"><span class="foloowTitle">线索评分：</span><div class="js-raty" id="clueScore" data-score="3" data-number="5" style="display: inline-block;margin-left: 20px" th:data-score="${clueFollow?.clueScore?:''}"></div></div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                        <div class="follow-item"><span  class="foloowTitle">沟通时长：</span><span class="text" id="communicationTime"></span></div>
                    </div>
                    <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12" th:if="${clueFollow?.followWay} == 1">
                        <div class="follow-item"><span  class="foloowTitle">通话录音：</span><span class="text"><audio controls="controls" src="" id="audioUrl"></audio></span></div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"  th:if="${clueFollow?.followWay?:''} == 5">
                        <div class="follow-item" th:if="${clueFollow?.followWay?:''} == 5"><span  class="foloowTitle">联系人邮箱：</span><span class="text" th:text="${clueFollow?.email?:''}"></span></div>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" th:if="${clueFollow?.followWay?:''} == 3">
                        <div class="follow-item" th:if="${clueFollow?.followWay?:''} == 3"><span  class="foloowTitle">微信号：</span><span class="text"></span></div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" >
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" th:if="${clueFollow?.followWay?:''} == 2 or ${clueFollow?.followWay?:''} == 6">
                            <div  class="follow-item" ><span  class="foloowTitle" >拜访图片：</span><span class="text"  data-toggle="modal" onclick="viewBtn()" style="color: #4460F2;cursor: pointer" >点击查看</span></div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"  th:if="${clueFollow?.followWay?:''} == 3">
                            <div  class="follow-item"><span  class="foloowTitle" >聊天记录：</span><span class="text"  data-toggle="modal" onclick="viewBtn()" style="color: #4460F2;cursor: pointer" >点击查看</span></div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" th:if="${clueFollow?.followWay?:''} == 5">
                            <div  class="follow-item"><span  class="foloowTitle" >邮件截图：</span><span class="text"  data-toggle="modal" onclick="viewBtn()" style="color: #4460F2;cursor: pointer" >点击查看</span></div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" th:if="${clueFollow?.followWay?:''} == 4">
                            <div  class="follow-item"><span  class="foloowTitle">电话账号页：</span><span class="text"  data-toggle="modal" onclick="viewBtn()" style="color: #4460F2;cursor: pointer" >点击查看</span></div>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" th:if="${clueFollow?.followWay?:''} == 4">
                            <div  class="follow-item"><span  class="foloowTitle" >电话时长页：</span><span class="text"  data-toggle="modal" onclick="viewBtn()" style="color: #4460F2;cursor: pointer" >点击查看</span></div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" th:if="${clueFollow?.followWay} ne 1">
                        <div class="follow-item" style="line-height: 0">
                            <span  class="foloowTitle" style="float:left">线索标签：</span>
                            <div th:unless="${clueFollow.tag == ''} or ${clueFollow.tag == null}" style="display:block;overflow: hidden;height: 50px;display: flex;align-items: center;margin-left: 270px">
                                <div  th:each="item : ${clueFollow?.tag?.split(',')?:''}"  class="clue">
                                    <span class="tagText" th:text="${item}" style="line-height: 100%"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="col-lg-11 col-md-11 col-sm-11 col-xs-11" style="padding-left: 0">
                            <div class="follow-item">
                                <span  class="foloowTitle" style="float: left">跟进详情：</span><span class="text" th:text="${clueFollow?.followDetail?:'(无跟进详情)'}" id="followDetail"></span>
                                <textarea id="editFoloowTextarea" class="form-control" placeholder="请输入跟进详情" style="height: 100px;width: 80%;float: left"></textarea>
                            </div>
                        </div>
                        <div class="col-lg-1 col-md-1 colr-sm-1 col-xs-1">
                            <button type="button" class="btn btn-primary" onclick="editBtn()" id="edit">编辑</button>
                            <button type="button" class="btn btn-primary" onclick="saveFollowDetail()" id="sumberBtn">保存</button>
                        </div>
                    </div>

<!--                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" th:if="${clueFollow?.followWay?:''} == 2 or ${clueFollow?.followWay?:''} == 6">-->
<!--                        <div class="follow-item" th:if="${clueFollow?.followWay?:''} == 2 or ${clueFollow?.followWay?:''} == 6">拜访图片：<span class="text"><img th:src="@{${clueFollow.attachmentUploadUrl}}" alt=""></span></div>-->
<!--                    </div>-->
<!--                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" th:if="${clueFollow?.followWay?:''} == 3">-->
<!--                        <div class="follow-item" th:if="${clueFollow?.followWay?:''} == 3">聊天记录：<span class="text"><img th:src="@{${clueFollow.attachmentUploadUrl}}" alt=""></span></div>-->
<!--                    </div>-->
<!--                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" th:if="${clueFollow?.followWay?:''} == 5">-->
<!--                        <div class="follow-item" th:if="${clueFollow?.followWay?:''} == 5">邮件截图：<span class="text"><img th:src="@{${clueFollow.attachmentUploadUrl}}" alt=""></span></div>-->
<!--                    </div>-->
<!--                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" th:if="${clueFollow?.followWay?:''} == 4">-->
<!--                        <div class="follow-item" th:if="${clueFollow?.followWay?:''} == 4">电话账号页：<span class="text"><img th:src="@{${clueFollow.accountUploadUrl}}" alt=""></span></div>-->
<!--                    </div>-->
<!--                    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" th:if="${clueFollow?.followWay?:''} == 4">-->
<!--                        <div class="follow-item" th:if="${clueFollow?.followWay?:''} == 4">电话时长页：<span class="text"><img th:src="@{${clueFollow.minUploadUrl}}"  alt=""></span></div>-->
<!--                    </div>-->
                </div>

            </div>
        </form>
    </div>
</div>
<div class="modal fade" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" role="dialog" id="lookPhone" style="margin-top: 2%">
    <div class="modal-dialog" role="document">
        <p style="text-align: center;color: #464646;font-size: 16px;" >
            <span th:if="${clueFollow?.followWay?:''} == 2 or ${clueFollow?.followWay?:''} == 6">拜访图片</span>
            <span th:if="${clueFollow?.followWay?:''} == 3">聊天记录</span>
            <span th:if="${clueFollow?.followWay?:''} == 5">邮件截图</span>
            <span th:if="${clueFollow?.followWay?:''} == 4">电话账号页/</span>
            <span th:if="${clueFollow?.followWay?:''} == 4">电话时长页</span>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </p>
        <div class="modal-content">
            <div class="modal-body">
                <div class="banner">
                    <div class="swiper-container" style="width: 100%;height: 320px; border-radius: 10px;">
                        <div class="swiper-wrapper" style="width: 100%;height: 100%;border-radius: 10px;">
<!--                            th:style="${clueFollow.accountUploadUrl}?'background:url(' + ${clueFollow.accountUploadUrl}+') no-repeat center center;background-size: auto 100%;':''"-->
                            <div class="swiper-slide" style="background: #FFFFFF" th:if="${clueFollow?.followWay?:''} == 5">
                                <img th:src="@{${clueFollow.attachmentUploadUrl}}" alt="">
                            </div>
                            <div class="swiper-slide" style="background: #FFFFFF" th:if="${clueFollow?.followWay?:''} == 2 or ${clueFollow?.followWay?:''} == 6">
                                <img th:src="@{${clueFollow.attachmentUploadUrl}}" alt="">
                            </div>
                            <div class="swiper-slide" style="background: #FFFFFF" th:if="${clueFollow?.followWay?:''} == 3">
                                <img th:src="@{${clueFollow.attachmentUploadUrl}}" alt="">
                            </div>
                            <div class="swiper-slide" style="background: #FFFFFF" th:if="${clueFollow?.followWay?:''} == 4">
                                <img th:src="@{${clueFollow.accountUploadUrl}}" alt="">
                            </div>
                            <div class="swiper-slide" style="background: #FFFFFF" th:if="${clueFollow?.followWay?:''} == 4">
                                <img th:src="@{${clueFollow.minUploadUrl}}"  alt="">
                            </div>
                        </div>
                        <div class="swiper-button-next swiper-button-white n-swiper"></div>
                        <div class="swiper-button-prev swiper-button-white l-swiper"></div>
                    </div>
                    <div class="swiper-bottom swiper-layer" onclick="goDetail()">
                        <a href="JavaScript:void(0);" class="title" id="title"></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<script src="/js/jquery-confirm/jquery-confirm.min.js"></script>
<script type="text/javascript" src="/js/crm/common/common.js"></script>
<!--标签插件-->
<script src="/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/js/popper.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.min.js"></script>
<script src="/js/crm/common/input-tag.js"></script>
<!--轮播图-->
<script type="text/javascript" src="/js/swiper-bundle.min.js"></script>
<script type="text/javascript" src="/js/popper.min.js"></script>
<!-- 评分插件 -->
<script type="text/javascript" src="/js/jquery.raty.js"></script>
<script src="/js/crm/customerManager/customerFollowRecordDetail.js"></script>
</html>